<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <script src="./../js/vue.js"></script>-->
    <script src="./vue.js"></script>
    <script src="./../../base/utils/otherUtils.js"></script>
    <style>
        .legend {
            border: 1px solid;
            padding: 10px 20px;
        }
        .item {
        }
        .color {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 1px solid;
        }
        .text {
            display: inline-block;
            height: 20px;
            padding-left: 5px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>{{self.name}}</h2>
        <my-legend :colors="self.color" :split="self.split" :cwidth="false"></my-legend>
        <textarea :value="self.dom" name="" style="width: 100%" rows="5" @change="change"></textarea>
        <div v-for="(obj,i) in allColorObj" :key="i">
            <h2>{{obj.name}}</h2>
            <my-legend :colors="obj.color" :split="obj.split" :cwidth="obj.cwidth"></my-legend>
            <textarea :value="obj.dom" name="" style="width: 100%;resize: none;" :rows="obj.dom.split('\n').length" disabled @select="copy(obj.dom)"></textarea>
        </div>
    </div>
    <template id="legend">
        <div>
            <div class="legend">
                <table>
                    <thead>
                        <tr>
                            <th v-for="i in theSplit" :key="'s' + i"></th>
                            <th v-for="i in theSplit" :key="'k' + i"></th>
                        </tr>
                    </thead>
                    <tbody>
                    <tr class="item" v-for="(c,ind) in columns" :key="ind" v-html="c">
                    </tr>
                    </tbody>
                </table>
            </div>
            每行个数：<select v-model="theSplit" style="width:200px" @change="changesplit">
                <option v-for="item in 10" :value="item" :key="item">{{ item }}</option>
            </select>
            标签宽度：<input type="number" v-model="width" @change="changeWidth"/>
        </div>
    </template>
</body>
<script>
    function parseXML(dom) {
        let div = document.createElement("div");
        div.innerHTML = dom;
        let cmes = div.getElementsByTagName(div.children[0].localName);
        if (!cmes.length) {
            alert('内容有问题');
            return ;
        }
        let ret = [];
        for (let i = 0;i < cmes.length;i++) {
            ret.push({
                color: cmes[i].getAttribute('color'),
                label: cmes[i].getAttribute('label'),
            });
        }
        return ret;
    }
    Vue.component('myLegend',{
        template: document.getElementById('legend').innerHTML,
        props: [
            // colors = [{color:'',label: ''}]
            "colors","split","cwidth"
        ],
        data() {
            return {
                columns: [],
                theSplit: 1,
                width: 200
            }
        },
        methods: {
            changeWidth(e) {
                this.width = + e.target.value;
                this.changesplit(this.theSplit,true);
            },
            changesplit(sp,nochangewidth) {
                if (typeof sp === "number") {
                    this.theSplit = sp;
                } else {
                    this.theSplit = + sp.target.value;
                }
                if (!nochangewidth) {
                    this.width = 200 * Math.sin(Math.PI / 2 * 1/this.theSplit).toFixed(1);
                }
                let tds = [];
                for (let i = 0;i < this.colors.length;) {
                    let tmp = '';
                    for (let j = 0;j < this.theSplit;j++,i++) {
                        if (i < this.colors.length) {
                            tmp += `<td class="color" style="background-color: ${this.colors[i].color};"></td>
                        <td class="text" style="width:${this.width}px;">${this.colors[i].label}</td>`
                        } else {
                            tmp += "<td></td><td></td>"
                        }
                    }
                    tds.push(tmp);
                }
                this.columns.splice(0,this.columns.length,...tds);
            }
        },
        mounted() {
            let $this = this;
            if (this.cwidth) {
                this.width = this.cwidth;
            }
            setTimeout(function () {
                $this.changesplit($this.split);
            },100);
        },
        watch: {
            colors() {
                this.changesplit(this.theSplit);
            }
        }
    });
</script>
<script>

    let avi = `<ColorMapEntry color="#ffffff" quantity="0" label="Positive" opacity="1" />
              <ColorMapEntry color="#ffeb3b" quantity="1" label="Drought arise" opacity="1" />
              <ColorMapEntry color="#fe8703" quantity="2" label="Moderate drought" opacity="1" />
              <ColorMapEntry color="#f90301" quantity="3" label="Severe drought" opacity="1" />`;
    let vhi = `<ColorMapEntry color="#ffffff" quantity="0" label="snow/ice/missing" opacity="1" />
              <ColorMapEntry color="#ff00a0" quantity="1" label="0 ~ 6" opacity="1" />
              <ColorMapEntry color="#f00050" quantity="2" label="6 ~ 12" opacity="1" />
              <ColorMapEntry color="#ff7878" quantity="3" label="12 ~ 24" opacity="1" />
              <ColorMapEntry color="#ffaa00" quantity="4" label="24 ~ 36" opacity="1" />
              <ColorMapEntry color="#ffff55" quantity="5" label="36 ~ 48" opacity="1" />
              <ColorMapEntry color="#55ff55" quantity="6" label="48 ~ 60" opacity="1" />
              <ColorMapEntry color="#00aa00" quantity="7" label="60 ~ 72" opacity="1" />
              <ColorMapEntry color="#5555ff" quantity="8" label="72 ~ 84" opacity="1" />
              <ColorMapEntry color="#0000aa" quantity="9" label="84 ~ 100" opacity="1" />`;
    let vswi = `<ColorMapEntry color="#ffffff" quantity="0" label="nodata"/>
              <ColorMapEntry color="#e60000" quantity="1" label="Heavy drought"/>
              <ColorMapEntry color="#ffd37f" quantity="2" label="Medium drought" />
              <ColorMapEntry color="#ffffbd" quantity="3" label="Light drought" />
              <ColorMapEntry color="#d1ff73" quantity="4" label="suitable" />
              <ColorMapEntry color="#38a800" quantity="5" label="Wet (over-wet)"  />`;
    let result = `<ColorMapEntry color="#ffffff" quantity="0" label="nodata" opacity="1" />
              <ColorMapEntry color="#f00050" quantity="1" label="Heavy drought" opacity="1" />
              <ColorMapEntry color="#ff7878" quantity="2" label="Medium drought" opacity="1" />
              <ColorMapEntry color="#ffaa00" quantity="3" label="Light drought" opacity="1" />
              <ColorMapEntry color="#55ff55" quantity="4" label="suitable" opacity="1" />
              <ColorMapEntry color="#5555ff" quantity="5" label="over-wet" opacity="1" />`;
    let et = `<ColorMapEntry label="0 - 1 mm" quantity="1" color="#1621ff"/>
              <ColorMapEntry label="1 - 2 mm" quantity="2" color="#64a4f7"/>
              <ColorMapEntry label="2 - 3 mm" quantity="3" color="#e0e8e9"/>
              <ColorMapEntry label="3 - 4 mm" quantity="4" color="#34d023"/>
              <ColorMapEntry label="4 - 5 mm" quantity="5" color="#b3de14"/>
              <ColorMapEntry label="5 - 6 mm" quantity="6" color="#fcff2a"/>
              <ColorMapEntry label="6 - 7 mm" quantity="7" color="#d9b21d"/>
              <ColorMapEntry label="7 - 8 mm" quantity="8" color="#c77619"/>
              <ColorMapEntry label=">8 mm" quantity="9999" color="#fa3600"/>`;
    let plant = `<ColorMapEntry label="玉米" quantity="1" color="#cc3126"/>
            <ColorMapEntry label="水稻" quantity="2" color="#31d980"/>
            <ColorMapEntry label="小麦" quantity="3" color="#663be6"/>
            <ColorMapEntry label="棉花" quantity="4" color="#7ddbe1"/>
            <ColorMapEntry label="苹果、园地等" quantity="5" color="#e488bb"/>
            <ColorMapEntry label="林地、桑树等" quantity="6" color="#3dd026"/>
            <ColorMapEntry label="蔬菜、大棚等" quantity="8" color="#5081e2"/>
            <ColorMapEntry label="盐碱地" quantity="9" color="#c926e5"/>
            <ColorMapEntry label="弃耕" quantity="10" color="#d9bb7f"/>`;
    let zhibei = `<sld:ColorMapEntry color="#f30a0e" label="温带常绿针叶林" quantity="1"/>
              <sld:ColorMapEntry color="#f85333" label="温带落叶阔叶林" quantity="2"/>
              <sld:ColorMapEntry color="#fc9c58" label="草地" quantity="3"/>
              <sld:ColorMapEntry color="#fec980" label="非深根灌丛" quantity="4"/>
              <sld:ColorMapEntry color="#ffedaa" label="深根灌丛" quantity="5"/>
              <sld:ColorMapEntry color="#edf7c9" label="灌溉农田" quantity="6"/>
              <sld:ColorMapEntry color="#c7e6db" label="无植被区" quantity="7"/>
              <sld:ColorMapEntry color="#a0d2e7" label="居民地" quantity="8"/>
              <sld:ColorMapEntry color="#73b4db" label="雨养农田" quantity="9"/>
              <sld:ColorMapEntry color="#4696cf" label="高寒草甸" quantity="10"/>`;
    let turang = `<sld:ColorMapEntry color="#26b0d2" label="Blank" quantity="1"/>
              <sld:ColorMapEntry color="#d872e7" label="HSf" quantity="2"/>
              <sld:ColorMapEntry color="#ebe482" label="PZf" quantity="3"/>
              <sld:ColorMapEntry color="#d621e2" label="RK" quantity="4"/>
              <sld:ColorMapEntry color="#87da7a" label="RGi" quantity="5"/>
              <sld:ColorMapEntry color="#d3d376" label="GLd" quantity="6"/>
              <sld:ColorMapEntry color="#e2326d" label="PZg" quantity="7"/>
              <sld:ColorMapEntry color="#c9913c" label="SCg" quantity="8"/>
              <sld:ColorMapEntry color="#5b98dd" label="PHc" quantity="9"/>
              <sld:ColorMapEntry color="#6e90ee" label="LPq" quantity="10"/>
              <sld:ColorMapEntry color="#cf9e3c" label="PHh" quantity="11"/>
              <sld:ColorMapEntry color="#bbc962" label="FLd" quantity="12"/>
              <sld:ColorMapEntry color="#4d5fd5" label="CMe" quantity="13"/>
              <sld:ColorMapEntry color="#2dd871" label="LVx" quantity="14"/>
              <sld:ColorMapEntry color="#c87ded" label="PDe" quantity="15"/>
              <sld:ColorMapEntry color="#ef9c64" label="LVg" quantity="16"/>
              <sld:ColorMapEntry color="#556dcc" label="CMc" quantity="17"/>
              <sld:ColorMapEntry color="#e69333" label="RGe" quantity="18"/>
              <sld:ColorMapEntry color="#d4e021" label="SCh" quantity="19"/>
              <sld:ColorMapEntry color="#45d9a8" label="CLh" quantity="20"/>
              <sld:ColorMapEntry color="#dc0f0f" label="LPk" quantity="21"/>
              <sld:ColorMapEntry color="#ca8345" label="CMu" quantity="22"/>
              <sld:ColorMapEntry color="#86e563" label="PLd" quantity="23"/>
              <sld:ColorMapEntry color="#ca0d72" label="RGc" quantity="24"/>
              <sld:ColorMapEntry color="#42d142" label="HSs" quantity="25"/>
              <sld:ColorMapEntry color="#674cd5" label="GLe" quantity="26"/>
              <sld:ColorMapEntry color="#ef624d" label="PZb" quantity="27"/>
              <sld:ColorMapEntry color="#6ccc2c" label="CMg" quantity="28"/>
              <sld:ColorMapEntry color="#d551cd" label="PZh" quantity="29"/>
              <sld:ColorMapEntry color="#f03c4b" label="PDd" quantity="30"/>
              <sld:ColorMapEntry color="#edc525" label="FLe" quantity="31"/>
              <sld:ColorMapEntry color="#974dc8" label="LVh" quantity="32"/>
              <sld:ColorMapEntry color="#58a8ed" label="GLm" quantity="33"/>
              <sld:ColorMapEntry color="#e22db2" label="ARb" quantity="34"/>
              <sld:ColorMapEntry color="#e1856e" label="LVj" quantity="35"/>
              <sld:ColorMapEntry color="#b1cb68" label="CMv" quantity="36"/>
              <sld:ColorMapEntry color="#c82c6b" label="PHj" quantity="37"/>
              <sld:ColorMapEntry color="#58eb76" label="LPu" quantity="38"/>
              <sld:ColorMapEntry color="#81e2e2" label="CMd" quantity="39"/>
              <sld:ColorMapEntry color="#a2e282" label="LPd" quantity="40"/>
              <sld:ColorMapEntry color="#9f62e5" label="FLm" quantity="41"/>
              <sld:ColorMapEntry color="#47dc5b" label="FLc" quantity="42"/>
              <sld:ColorMapEntry color="#b138dd" label="GLk" quantity="43"/>
              <sld:ColorMapEntry color="#a471d0" label="VRe" quantity="44"/>
              <sld:ColorMapEntry color="#78e7bb" label="PDg" quantity="45"/>
              <sld:ColorMapEntry color="#61b2e7" label="ARh" quantity="46"/>
              <sld:ColorMapEntry color="#533bef" label="CHh" quantity="47"/>
              <sld:ColorMapEntry color="#533bef" label="CHk" quantity="48"/>
              <sld:ColorMapEntry color="#73c979" label="PLe" quantity="49"/>
              <sld:ColorMapEntry color="#eed52f" label="CMx" quantity="50"/>
              <sld:ColorMapEntry color="#ef1fd4" label="LVa" quantity="51"/>
              <sld:ColorMapEntry color="#ef1fd4" label="GLu" quantity="52"/>
              <sld:ColorMapEntry color="#df379c" label="ACh" quantity="53"/>
              <sld:ColorMapEntry color="#e5485f" label="ARl" quantity="54"/>
              <sld:ColorMapEntry color="#21df60" label="GRh" quantity="55"/>
              <sld:ColorMapEntry color="#21df60" label="ARc" quantity="56"/>
              <sld:ColorMapEntry color="#cc6a86" label="LPe" quantity="57"/>
              <sld:ColorMapEntry color="#59c3ca" label="FRh" quantity="58"/>
              <sld:ColorMapEntry color="#45efa0" label="FRx" quantity="59"/>
              <sld:ColorMapEntry color="#45efa0" label="ARo" quantity="60"/>
              <sld:ColorMapEntry color="#6666da" label="CLp" quantity="61"/>
              <sld:ColorMapEntry color="#e780c5" label="SNm" quantity="62"/>
              <sld:ColorMapEntry color="#67c9ec" label="SNg" quantity="63"/>
              <sld:ColorMapEntry color="#67c9ec" label="PHl" quantity="64"/>
              <sld:ColorMapEntry color="#a5ca6c" label="PLm" quantity="65"/>
              <sld:ColorMapEntry color="#1d60e4" label="PHg" quantity="66"/>
              <sld:ColorMapEntry color="#a9ef1e" label="KSh" quantity="67"/>
              <sld:ColorMapEntry color="#ea783f" label="GYh" quantity="68"/>
              <sld:ColorMapEntry color="#65e8d7" label="KSl" quantity="69"/>
              <sld:ColorMapEntry color="#0ecda7" label="LPm" quantity="70"/>
              <sld:ColorMapEntry color="#2870db" label="LXh" quantity="71"/>
              <sld:ColorMapEntry color="#27b7cd" label="KSk" quantity="72"/>
              <sld:ColorMapEntry color="#eb398c" label="LVk" quantity="73"/>
              <sld:ColorMapEntry color="#e177cc" label="ANh" quantity="74"/>
              <sld:ColorMapEntry color="#ec17ec" label="DS" quantity="75"/>
              <sld:ColorMapEntry color="#19c86b" label="CLl" quantity="76"/>
              <sld:ColorMapEntry color="#6946cb" label="FLu" quantity="77"/>
              <sld:ColorMapEntry color="#a881e2" label="SNh" quantity="78"/>
              <sld:ColorMapEntry color="#cdb573" label="CHl" quantity="79"/>
              <sld:ColorMapEntry color="#46dbb4" label="RGd" quantity="80"/>
              <sld:ColorMapEntry color="#736cd2" label="LXf" quantity="81"/>
              <sld:ColorMapEntry color="#6e74c9" label="NTr" quantity="82"/>
              <sld:ColorMapEntry color="#3cd3c9" label="VRk" quantity="83"/>
              <sld:ColorMapEntry color="#c9526c" label="FRr" quantity="84"/>
              <sld:ColorMapEntry color="#ca71e0" label="ARa" quantity="85"/>
              <sld:ColorMapEntry color="#a9d478" label="PTa" quantity="86"/>
              <sld:ColorMapEntry color="#39d964" label="LVf" quantity="87"/>
              <sld:ColorMapEntry color="#bedc47" label="SCk" quantity="88"/>
              <sld:ColorMapEntry color="#8e6cd0" label="PTe" quantity="89"/>
              <sld:ColorMapEntry color="#78cc2e" label="ACu" quantity="90"/>`;
    let self = `<ColorMapEntry color="#5555ff" quantity="5" label="over-wet" opacity="1" />`;

    let toColorsObj = (dom,name) => {
        let cls = parseXML(dom);
        let sp = parseInt(cls.length / 9)
        sp = sp ? sp : 1
        let cwidth = 200 * Math.sin(Math.PI / 2 * 1/sp).toFixed(1);
        return {
            name,
            dom: dom.split('\n').map(_ => _.trim()).join('\n'),
            color: cls,
            split: sp ? sp : 1,
            cwidth
        }
    };

    let allColorObj = ((cs) => {
        let acs = [];
        for (let i in cs) {
            acs.push(toColorsObj(cs[i],i));
        }
        return acs;
    })({avi,vhi,vswi,result,et,plant,zhibei,turang});

    let vue = new Vue({
        el: "#app",
        data: {
            allColorObj,
            self: {
                dom: self,
                color: parseXML(self),
                split: 1,
                name: '自定义'
            }
        },
        methods: {
            change(n) {
                this.self.color = parseXML(n.target.value);
                this.self.dom = n.target.value.replace(/\n/g,'\r\n');
            },
            copy(text) {
                console.log(text);
                OtherUtils.Copy(text);
                OtherUtils.ShowTip("复制成功",2000)
            }
        },
        mounted() {

        }
    });
</script>
</html>
